summaryrefslogtreecommitdiffstatshomepage
path: root/frontend/src/routes/archives/[id]/+page.svelte
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--frontend/src/routes/archives/[id]/+page.svelte99
1 files changed, 99 insertions, 0 deletions
diff --git a/frontend/src/routes/archives/[id]/+page.svelte b/frontend/src/routes/archives/[id]/+page.svelte
new file mode 100644
index 0000000..50a2940
--- /dev/null
+++ b/frontend/src/routes/archives/[id]/+page.svelte
@@ -0,0 +1,99 @@
+<script lang="ts">
+ import { updateArchives } from '$gql/Mutations';
+ import { archiveQuery } from '$gql/Queries';
+ import { Direction, Layout, type FullArchiveFragment, type PageFragment } from '$gql/graphql';
+ import { initReaderContext } from '$lib/Reader';
+ import { initSelectionContext } from '$lib/Selection';
+ import { setTabContext } from '$lib/Tabs';
+ import { toastFinally } from '$lib/Toasts';
+ import Guard from '$lib/components/Guard.svelte';
+ import Head from '$lib/components/Head.svelte';
+ import Titlebar from '$lib/components/Titlebar.svelte';
+ import Grid from '$lib/containers/Grid.svelte';
+ import Gallery from '$lib/gallery/Gallery.svelte';
+ import PageView from '$lib/reader/PageView.svelte';
+ import Reader from '$lib/reader/Reader.svelte';
+ import ArchiveDelete from '$lib/tabs/ArchiveDelete.svelte';
+ import ArchiveDetails from '$lib/tabs/ArchiveDetails.svelte';
+ import ArchiveEdit from '$lib/tabs/ArchiveEdit.svelte';
+ import Tab from '$lib/tabs/Tab.svelte';
+ import Tabs from '$lib/tabs/Tabs.svelte';
+ import { getContextClient } from '@urql/svelte';
+ import type { PageData } from './$types';
+
+ export let data: PageData;
+ const client = getContextClient();
+ const reader = initReaderContext();
+ setTabContext({
+ tabs: {
+ details: { title: 'Details' },
+ edit: { title: 'Edit' },
+ deletion: { title: 'Delete' }
+ },
+ current: 'details'
+ });
+
+ $: result = archiveQuery(client, { id: data.id });
+
+ function updateCover(event: CustomEvent<number>) {
+ updateArchives(client, { ids: archive.id, input: { cover: { id: event.detail } } }).catch(
+ toastFinally
+ );
+ }
+
+ let archive: FullArchiveFragment;
+
+ $: $result, update();
+ function update() {
+ if (!$result.stale && $result.data?.archive.__typename === 'FullArchive') {
+ archive = structuredClone($result.data.archive);
+
+ $reader.pages = archive.pages;
+ }
+ }
+
+ const selection = initSelectionContext<PageFragment>('Page', (p) => p.path);
+ $selection.selectable = (p) => p.comicId === null;
+
+ $: if (archive) {
+ $selection.view = archive.pages;
+ }
+</script>
+
+<Head section="Archive" title={archive?.name} />
+
+{#if archive}
+ <Grid>
+ <header>
+ <Titlebar title={archive.name} />
+ </header>
+
+ <aside>
+ <Tabs>
+ <Tab id="details">
+ <ArchiveDetails {archive} />
+ </Tab>
+ <Tab id="edit">
+ <ArchiveEdit {archive} />
+ </Tab>
+ <Tab id="deletion">
+ <ArchiveDelete {archive} />
+ </Tab>
+ </Tabs>
+ </aside>
+
+ <main class="overflow-auto">
+ <Gallery
+ pages={archive.pages}
+ on:open={(e) => ($reader = $reader.open(e.detail))}
+ on:cover={updateCover}
+ />
+ </main>
+ </Grid>
+{:else}
+ <Guard {result} />
+{/if}
+
+<Reader>
+ <PageView layout={Layout.Single} direction={Direction.LeftToRight} />
+</Reader>